<template>
  <div>
    <el-dialog
      v-model="visible.mainForm"
      :close-on-click-modal="false"
      title="新增渠道优惠券"
      width="80%"
      @close="closeModal"
    >
      <el-form ref="formRef" :model="form" size="small" label-width="120px">
        <coupon-select ref="couponSelectRef" @couponChange="couponChange($event)" />
        <product-select ref="productSelectRef" />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" link @click="doCancel">取消</el-button>
          <el-button type="primary" :loading="loading.submit" @click="doSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, reactive, ref, } from 'vue'
import Cookies from 'js-cookie'

import ProductSelect from '@/views/marketing/channelCoupons/components/productSelect.vue'
import CouponSelect from '@/views/marketing/channelCoupons/components/couponSelect.vue'

import { add } from '@/api/channelCoupons'

defineComponent({
  name: 'ChannelCouponsForm'
})

const emit = defineEmits('reset');

let visible = reactive({
  mainForm: false
})

let loading = reactive({
  submit: false,
})

const formRef = ref();
let form = ref({});

const couponSelectRef = ref();
const productSelectRef = ref();
// 打开弹出窗
function show () {
  form.value = {
    shopId: parseInt(Cookies.get('cereShopId')),
  }
  visible.mainForm = true
}
// 关闭弹窗
function closeModal () {
  couponSelectRef.value.tableData = []
  couponSelectRef.value.params = {
    search: '',
    page: 1,
    pageSize: 10,
    shopId: 0,
    shelveState: 1,
  }
  productSelectRef.value.tableData = []
  productSelectRef.value.visible = false
  productSelectRef.value.params = {
    search: '',
    page: 1,
    pageSize: 10,
    shopId: 0,
    shelveState: 1,
  }
  couponSelectRef.value.getTableData()
}

// 取消
function doCancel () {
  visible.mainForm = false
}
function doSubmit () {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.submit = true
      doAdd()
    }
  })
}
function doAdd () {
  formRef.value.validate((valid) => {
    if (valid) {
      form.value.shopCouponId = couponSelectRef.value.tableRadio.shopCouponId
      form.value.productId = productSelectRef.value.tableRadio.productId
      if (!form.value.productId) {
        ElMessage.warning('请查询并选择商品')
        return false
      }
      if (!form.value.shopCouponId) {
        ElMessage.warning('请查询并选择优惠券')
        return false
      }
      add(form.value)
        .then((res) => {
          resetForm()
          emit('reset')
          ElMessage.success('添加成功')
        })
        .catch(() => {}).finally(() => {
          loading.submit = false
        })
    }
  })
}
function couponChange (val) {
  productSelectRef.value.getTableData(val)
}
function resetForm () {
  visible.mainForm = false
  productSelectRef.value.params.search = ''
  productSelectRef.value.data = []
  couponSelectRef.value.params.search = ''
  couponSelectRef.value.data = []
}

defineExpose({
  show,
  resetForm,
})
</script>
